<script setup>
import {huanxintu} from './js/pie.js'
import {onMounted,ref} from 'vue'
import {getStatistics} from '../../api/index.js'

const series = ref([
  {
    name: '危险',
    y: 60,
    color:"#ff4d4f",
  },
  {
    name: '警惕',
    y: 40,
    color:"#ffa940",
  },
  {
    name: '注意',
    y: 20,
    color:"#7A90FF",
  },
])
const dateRef = ref('')

onMounted(() => {
  getStatistics().then(resp=>{
    // console.log('resp',resp)
    const {danger,vigilant,notice,date} = resp;
    dateRef.value = date;
    series.value[0]['y'] =danger;
    series.value[1]['y'] =vigilant;
    series.value[2]['y'] =notice;
    huanxintu('pieContainer', series.value)
  })
})
</script>

<template>
  <div class="lchart">
    <div class="lchart__tit">
      <div class="lcwrap">
        <span class="text1">A股风险个股监测分布</span>
      </div>
      <div class="lcwrap">
        <span class="text2">{{dateRef}}</span>
      </div>
    </div>
    <div class="lchart__content">
      <div id="pieContainer">
        <!--饼图-->
      </div>
      <div class="list">
        <div class="list__item" v-for="item in series">
          <div class="circle" :style="{'background':item.color}"></div>
          <div class="tit">{{item.name}}</div>
          <div class="count">{{item.y}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
#pieContainer {
  width: 140px;
  height: 140px;
  text-align: center;
}

.lchart {
  min-height: 200px;
  padding: 16px;
  border-radius: 16px;
  background: #FFFFFF;

  .lchart__tit {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .lcwrap {
      display: flex;
      align-items: center;

      span.text1 {
        height: 25px;
        color: rgba(36, 37, 38, 1);
        font-family: PingFangSC-Medium;
        font-weight: 450;
        font-size: 18px;
        line-height: 25px;
        margin-right: 6px;
      }

      span.text2 {
        height: 20px;
        color: rgba(108, 110, 122, 1);
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
      }

    }
  }
  .lchart__content{
    margin-top:20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .list{
      padding-right:20px;
      .list__item{
        display: flex;
        padding:8px 0;
        .circle{
          width:15px;
          height:15px;
          background: #ccc;
          border-radius:2px;
        }
        .tit{
          font-size:12px;
          margin:0 30px 0 10px;
        }
        .count{
          font-size:14px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>